<template>
  <div class="box">
    <el-card class="box-card">
      <div slot="header" class="clearfix" style="position: relative">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>查询问题</el-breadcrumb-item>
        </el-breadcrumb>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
          style="position: absolute; top: -15px; right: 0px; width: 110px"
          >查询</el-button
        >
      </div>
      <div class="text item">
        <el-form
          :model="queryForm"
          ref="queryForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <!-- 单选按钮 问题来源 -->
          <el-form-item label="来源" prop="source">
            <el-radio-group v-model="queryForm.source">
              <el-radio label="">全部</el-radio>
              <el-radio
                v-for="item in sourceList"
                :key="item.id"
                :label="item.kbtypename"
              ></el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 姓名 -->
          <el-form-item label="姓名" prop="username">
            <el-input v-model="queryForm.username"></el-input>
          </el-form-item>
          <!-- 手机 -->
          <el-form-item label="手机" prop="phone">
            <el-input v-model="queryForm.phone"></el-input>
          </el-form-item>
          <!-- 报告时间 -->
          <el-form-item label="报告时间" prop="inputtime">
            <!-- 一行分成两列 第一列 -->
            <!-- 开始日期 -->
            <el-date-picker
              value-format="yyyy-MM-dd HH:mm:ss"
              size="large"
              v-model="queryForm.starttime"
              type="datetime"
              placeholder="开始日期"
            >
            </el-date-picker>
            <!-- 结束时间 -->
            <el-date-picker
              value-format="yyyy-MM-dd HH:mm:ss"
              size="large"
              v-model="queryForm.endtime"
              type="datetime"
              placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <!-- 查询按钮 -->
          <!-- <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >查询</el-button
            >
          </el-form-item> -->
        </el-form>
      </div>
    </el-card>
    <!-- 下半部分做展示区域 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb>
          <el-breadcrumb-item>
            根据查询条件共有{{ this.total }}条记录
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="text item">
        <el-table
          border
          :data="queryList"
          style="width: 100%"
          header-cell-class-name="table_header_query"
        >
          <el-table-column label="序号" width="50" type="index">
          </el-table-column>
          <el-table-column
            prop="username"
            label="姓名"
            width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="phone"
            label="手机号码"
            width="200"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="inputtime"
            label="报告时间"
            width="200"
            align="center"
            ><template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{
                scope.row.inputtime | timeFilter
              }}</span>
            </template></el-table-column
          >
          <el-table-column prop="source" label="来源" width="100" align="center"
            ><template slot-scope="scope">
              <el-tag :type="scope.row.source | tagChangeFilter" effect="dark">
                {{ scope.row.source }}
              </el-tag>
            </template></el-table-column
          >
          <el-table-column
            prop="message"
            label="问题描述"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" align="center" width="200"
            ><template slot-scope="scope">
              <el-button
                icon="el-icon-edit"
                size="mini"
                type="primary"
                @click="
                  $router.push('/index/kb-update/' + scope.row.id + '/query')
                "
                >编辑</el-button
              >
              <el-button
                @click="del(scope.row.id)"
                icon="el-icon-edit"
                size="mini"
                type="danger"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页控制条 -->
        <div class="pageNavBar">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageInfo.curr"
            :page-sizes="pageSize"
            :page-size="5"
            layout="sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import request from "@/api/koubei.js";
export default {
  data() {
    return {
      total: 0,
      pageSize: [5, 8, 10, 12],
      // 分页相关参数
      pageInfo: {
        curr: 1,
        limit: 5,
        total: 0,
      },
      // 查询搜索的表单
      queryForm: {
        source: "",
        phone: "",
        username: "",
        starttime: "",
        endtime: "",
      },
      // 问题来源的集合
      sourceList: [],
      queryList: [],
    };
  },
  // 方法
  methods: {
    // 每页记录数变化触发
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageInfo.limit = val;
      // 加载数据
      this.getKouBeis();
    },
    // 当前页发生变化触发
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      // 把val值赋值给状态值中的pageInfo.curr
      this.pageInfo.curr = val;
      // 加载数据
      this.getKouBeis();
    },
    // 删除一条
    del(id) {
      // 确认框
      // 确认框提示
      this.$confirm("确定删除吗？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((r) => {
          // 点击了确定按钮
          request
            .delkb(id)
            .then((r) => {
              console.log(r);
              if (r.data.code === 0) {
                this.$message({
                  message: "删除成功",
                  type: "success",
                });
                // 刷新页面
                this.getKouBeis();
              } else {
                this.$message.error("删除失败");
              }
            })
            .catch((e) => {
              this.$message.error("删除请求异常");
            });
        })
        .catch((e) => {
          // 点击了取消按钮
          this.$message({
            message: "已取消删除",
          });
        });
    },
    // 点击查询按钮
    submitForm() {
      this.getKouBeis();
    },
    // 多条件查询问题
    getKouBeis() {
      request
        .getKoubeiByCondition({ ...this.pageInfo, ...this.queryForm })
        .then((r) => {
          console.log(r);
          // 了解人对象结构，1.获取查询出来的问题数组 2.问题总记录数  3.
          // 作为下半部分展示问题数组应该赋值给当前页面状态值
          this.queryList = r.data.pageInfo.list;
          this.total = r.data.pageInfo.total;
          // kblist数组长度等于0，说明没有查到数据
          if (r.data.kblist.length === 0) {
            this.$message({
              message: "没有搜索到您想要的信息",
            });
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 编写查询问题来源方法
    getsoures() {
      request
        .getkbSource()
        .then((r) => {
          console.log(r);
          this.sourceList = r.data;
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
  // 钩子函数
  created: function () {
    // 测试调用多条件查询问题
    // this.getKouBeis();
    // 调用查询问题来源
    this.getsoures();
  },
};
</script>
<style>
/*激活导航按钮测试*/

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #3da978;
  color: #FFF;
}
/*表头样式修改*/
/*.el-table thead {
  color: #ccc;
}
.el-table__header {
  line-height: 25px;
  height: 25px;
}

/*.el-table th.el-table__cell {
  border-bottom: 1px solid #ebeef5;
  background: green;
} */
/*.el-table--border th.el-table__cell,
.el-table__fixed-right-patch {
  background: green;
  border-bottom: 1px solid #ebeef5;
}*/
.table_header_query {
  border-bottom: 1px solid #ebeef5 !important;
  background: #fff !important;
  height: 25px !important;
  line-height: 25px !important;
  color: #000;
}
/*表单项flex布局 靠左*/
.el-form-item {
  display: flex;
}
/*单行文本框宽度*/
.el-input,
.el-textarea {
  width: 461px;
}
/*时间选择器 中间外边距*/
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 220px;
  margin-right: 20px;
}
/*按钮*/
/*.clearfix:after.el-button {
  position: absolute;
  top: -15px;
  right: 0px;
  width: 110px;
}*/
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
</style>
